{% extends "base.html" %}

{% block title %}{{ page_title }} - 乒乓球培训管理系统{% endblock %}

{% block extra_css %}
<style>
    .recharge-container {
        max-width: 600px;
        margin: 0 auto;
    }

    .current-balance {
        background: #28a745;
        color: white;
        border-radius: 8px;
        padding: 1rem;
        margin-bottom: 1.5rem;
        text-align: center;
    }

    .balance-amount {
        font-size: 1.5rem;
        font-weight: bold;
        margin: 0.3rem 0;
    }

    .quick-amounts {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
        gap: 0.5rem;
        margin-bottom: 1rem;
    }

    .quick-amount {
        border: 1px solid #dee2e6;
        border-radius: 4px;
        padding: 0.5rem;
        text-align: center;
        cursor: pointer;
        background: white;
        font-size: 0.9rem;
    }

    .quick-amount:hover {
        border-color: #007bff;
    }

    .quick-amount.selected {
        border-color: #007bff;
        background: #007bff;
        color: white;
    }

    .recharge-form {
        background: white;
        border: 1px solid #dee2e6;
        border-radius: 8px;
        padding: 1.5rem;
    }

    .btn-recharge {
        background: #28a745;
        border: none;
        border-radius: 4px;
        padding: 0.75rem 1.5rem;
        color: white;
        width: 100%;
    }

    .btn-recharge:hover {
        background: #218838;
        color: white;
    }

    .btn-recharge:disabled {
        background: #6c757d;
        cursor: not-allowed;
    }

    @media (max-width: 768px) {
        .quick-amounts {
            grid-template-columns: repeat(4, 1fr);
        }
    }
</style>
{% endblock %}

{% block content %}
<div class="container-fluid">
    <div class="recharge-container">
        <!-- 页面标题 -->
        <h3 class="text-center mb-3">账户充值</h3>

        <!-- 当前余额显示 -->
        <div class="current-balance">
            <div>当前余额</div>
            <div class="balance-amount">¥{{ "%.2f"|format(account_summary.balance) }}</div>
        </div>

        <!-- 充值表单 -->
        <div class="recharge-form">
            <form method="post" id="rechargeForm">
                {{ form.hidden_tag() }}

                <!-- 快速金额选择 -->
                <div class="mb-3">
                    <label class="form-label">选择充值金额</label>
                    <div class="quick-amounts">
                        <div class="quick-amount" data-amount="50">¥50</div>
                        <div class="quick-amount" data-amount="100">¥100</div>
                        <div class="quick-amount" data-amount="200">¥200</div>
                        <div class="quick-amount" data-amount="500">¥500</div>
                        <div class="quick-amount" data-amount="1000">¥1000</div>
                    </div>
                </div>

                <!-- 自定义金额 -->
                <div class="mb-3">
                    {{ form.amount.label(class="form-label") }}
                    {{ form.amount(class="form-control", placeholder="或输入自定义金额", id="amount") }}
                    {% if form.amount.errors %}
                        <div class="text-danger">
                            {% for error in form.amount.errors %}
                                <small>{{ error }}</small>
                            {% endfor %}
                        </div>
                    {% endif %}
                </div>

                <!-- 支付方式 -->
                <div class="mb-3">
                    {{ form.payment_method.label(class="form-label") }}
                    {{ form.payment_method(class="form-select") }}
                    {% if form.payment_method.errors %}
                        <div class="text-danger">
                            {% for error in form.payment_method.errors %}
                                <small>{{ error }}</small>
                            {% endfor %}
                        </div>
                    {% endif %}
                </div>

                <button type="submit" class="btn btn-recharge">确认充值</button>
            </form>

            <div class="mt-3 text-muted">
                <small><i class="fas fa-info-circle me-1"></i>充值成功后余额将立即到账</small>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
$(document).ready(function() {
    // 快速金额选择
    $('.quick-amount').click(function() {
        $('.quick-amount').removeClass('selected');
        $(this).addClass('selected');

        const amount = $(this).data('amount');
        $('#amount').val(amount);
    });

    // 自定义金额输入时清除快速选择
    $('#amount').on('input', function() {
        $('.quick-amount').removeClass('selected');
    });

    // 表单提交验证
    $('#rechargeForm').submit(function(e) {
        const amount = parseFloat($('#amount').val()) || 0;
        const paymentMethod = $('select[name="payment_method"]').val();

        if (amount <= 0) {
            alert('请输入有效的充值金额');
            e.preventDefault();
            return false;
        }

        if (!paymentMethod) {
            alert('请选择支付方式');
            e.preventDefault();
            return false;
        }

        return confirm('确认充值 ¥' + amount.toFixed(2) + ' ?');
    });
});
</script>
{% endblock %}